<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>家庭成员</title>
    <link rel="shortcut icon" href="../../image/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link rel="stylesheet" href="../../css/student.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-container">
        <div class="layui-card" style="margin-top: 15px">
            <div class="layui-card-header"><b style="font-size: 18px">添加家庭成员</b></div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="memberName" required lay-verify="required"
                                   placeholder="请输入家庭成员姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">亲属关系</label>
                        <div class="layui-input-block">
                            <select name="relation" lay-verify="required">
                                <option value=""></option>
                                <option value="父亲">父亲</option>
                                <option value="母亲">母亲</option>
                                <option value="姐姐">姐姐</option>
                                <option value="哥哥">哥哥</option>
                                <option value="弟弟">弟弟</option>
                                <option value="妹妹">妹妹</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phoneNumber" lay-verify="required|phone|number"
                                   placeholder="联系电话"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">住址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" lay-verify="required" placeholder="居住地址"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">工作单位</label>
                        <div class="layui-input-block">
                            <input type="text" name="occupation" lay-verify="required" placeholder="工作单位"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formfamily">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="checkfamily">
            <table id="demo" lay-filter="familymember"></table>
        </div>
    </div>
</div>
</body>
<script src="../../libs/layui/layui.js"></script>
<script src="../../js/model.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'element', 'jquery', 'okLayer', 'okUtils'], function () {
        let layer = layui.layer;
        let okLayer = layui.okLayer;
        let form = layui.form;
        let table = layui.table;
        let element = layui.element;
        let $ = layui.jquery;
        let okUtils = layui.okUtils;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();
        // 获取enterprise
        var student = JSON.parse(window.sessionStorage.getItem("student"));

        //数据渲染
        var familymember = table.render({
            elem: '#demo'
            , url: ctx + "/ygssecs/getfamilymemberBystuid" //数据接口
            , where: {stuid: student.stuid}
            , page: false//不开启分页
            , width: 1058
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 200 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'count' //规定数据总数的字段名称，默认：count
                , dataName: 'data' //规定数据列表的字段名称，默认：data
            }, cols: [[ //表头
                {title: '序号', type: 'numbers', width: 80, sort: false, fixed: 'left', align: 'center'}
                , {field: 'memberid', title: 'ID', hide: true, width: 80, sort: false, fixed: 'left', align: 'center'}
                , {field: 'name', title: '姓名', width: 150, sort: false, fixed: 'left', align: 'center'}
                , {field: 'relation', title: '亲属关系', width: 120, align: 'center'}
                , {field: 'phonenumber', title: '联系电话', width: 150, align: 'center'}
                , {field: 'address', title: '居住地址', width: 300, align: 'center'}
                , {field: 'occupation', title: '工作单位', width: 150, align: 'center'}
                , {title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
            ]]
        });

        //表格行内事件
        table.on("tool(familymember)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.memberid);
                    break;
            }
        });

        //编辑家庭成员
        function edit(data) {
            okLayer.open("更新用户", "familymember-update.html", "90%", "90%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function () {
                familymember.reload();
            })
        }

        //删除家庭成员
        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("/ygssecs/delfamilymember", "post", {familyid: id}, true).done(function (response) {
                    console.log(response);
                    okUtils.tableSuccessMsg(response.msg);
                    familymember.reload();
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }

        //添加家庭成员
        form.on('submit(formfamily)', function (data) {
            var familymember = new FamilyMember(null, data.field.memberName, data.field.relation, data.field.phoneNumber, data.field.address, data.field.occupation, student);
            var tfamilyjson = JSON.stringify(familymember);
            var index = layer.load();
            $.ajax({
                url: ctx + "/ygssecs/addfamilymember",
                type: 'POST',
                // headers: {"token": sessionStorage.getItem("token")},
                data: {famliyjosn: tfamilyjson}
            }).done(function (response) {
                console.log(response);
                if (response.code == 200) {
                    setTimeout(function () {
                        okLayer.greenTickMsg(response.msg, function () {
                            layer.close(index);
                            location.reload();
                        });
                    }, 500);
                } else if (response.code == 201) {
                    setTimeout(function () {
                        okLayer.yellowSighMsg(response.msg, function () {
                            layer.close(index);
                        });
                    }, 500);
                } else {
                    setTimeout(function () {
                        okLayer.yellowSighMsg(response.msg, function () {
                            layer.close(index);
                            // location.reload();
                        });
                    }, 500);
                }
            }).fail(function (error) {
                console.log(error);
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</html>